<template>
    <div ref="scroll-wrap" class="wrapper">
        <ul  class="content" :style="'height:'+itemsHeight+'px'">
            <li class="item" v-for="item in positionlist" :key="item.id">
                <a href="/job_detail/9c53141769359d7d03Fy09W1EFQ~.html" ka="job_list_1" data-itemid="1" data-lid="nlp-9chHDceC5Le.search.1" data-index="0">
                        <img :src="item.image">
                    <div class="text">
                        <div class="title">
                            <h4>
                                <span class="title-text">{{item.position}}</span>
                            </h4>
                            <span class="salary">{{item.salary}}</span>
                        </div>
                        <div class="name">{{item.company}}</div>
                        <div class="msg"><em>{{item.location}}</em><em>{{item.experience}}</em><em>{{item.education}}</em></div>
                    </div>
                </a>
            </li>
            <div class="more">
                加载更多
            </div>
        </ul>
    </div>
</template>
<script>
import {getPositionList} from '../../../api/index'
import {mapState,mapGetters,mapMutations} from 'vuex';
import { Indicator,Toast } from 'mint-ui'
import 'mint-ui/lib/style.css'
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
BScroll.use(Pullup)
export default {
    name:'postionItem',
    data:function(){ 
        return{
            start:0,
            limit:10,
            reachEnd:false,
            itemsHeight:0,
            positionlist:[],
        }
    },
    methods: { 
        // ...mapMutations(['getList']),
        initBscroll() {
            this.bscroll = new BScroll(this.$refs['scroll-wrap'], {
                scrollY: true,
                probeType:3,
                pullUpLoad: true
            })
            this.bscroll.on('pullingUp', ()=>this.getPositionListHandler())

        },
        async getPositionListHandler(){
            if(this.reachEnd){
                Toast({
                    message:"没有更多数据了",
                    position:"bottom",
                    duration:5000
                })
                this.bscroll.finishPullUp();
            }
            Indicator.open();
            let rs = await getPositionList();
            this.positionlist = rs.data;
            if(this.$store.state.search&&this.$store.state.city){
                console.log("fil",this.$store.state.search)
                this.positionlist = this.positionlist.filter(item=>{
                    return  this.$store.state.search==item.position&&this.$store.state.city==item.location
                })
                
            }
            console.log("???",this.positionlist)
            if(this.start === 0){
                this.positionlist =this.positionlist;
            }else{
                this.positionlist.push(...this.positionlist);
            }
            
            this.itemsHeight = this.positionlist.length * 91
            if(this.positionlist.length<this.limit){
                this.reachEnd = true;
            }
            this.$nextTick(()=>{
                Indicator.close();
                this.start +=this.limit
                this.bscroll.refresh();
                this.bscroll.finishPullUp();
                
            })
            
        },
        
    

    },
    created(){
        this.getPositionListHandler();
        this.$nextTick(()=>{
            this.initBscroll();
        })
        // console.log(this.positionlist);

        // 新添加数据
        // this.$store.dispatch('getList')
    },
    computed:{
        ...mapState(['search','city']),
        // ...mapGetters(['filterList'])
    }
}
</script>
<style lang="scss" scoped>
.more {
    font-size: 14px;
    color: #8b96a6;
    line-height: 48px;
    display: block;
}
.wrapper{
    flex:1;
    overflow: hidden;
    display:flex;
}
.content{
    flex:1;
    overflow: hidden;
}
ul{
    .item {
        height: 91px;
        position: relative;
        img {
            width: 59px;
            height: 59px;
            display: block;
            border: none;
            margin-left: 18px;
            margin-top: 16px;
            float: left;
            border-radius: 5px;
        }
    }
    .item>a {
        display: block;
        height: 100%;
    }
    a {
        text-decoration: none;
        color: #414a60;
    }
    .text {
        margin-left: 96px;
        position: relative;
        h4 {
            font-size: 15px;
            color: #414a60;
            line-height: 15px;
            font-weight: 400;
            padding-top: 18px;
            margin-right: 90px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .title-text {
                font-size: 14px;
                max-width: 156px;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                vertical-align: middle;
            }
        }
        .salary {
            font-style: normal;
            font-size: 19px;
            color: #fc6c38;
            position: absolute;
            right: 19px;
            top: 18px;
            line-height: 15px;
        }
        .name {
            font-size: 12px;
            color: #414a60;
            line-height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 19px;
        }
        .msg {
            line-height: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 19px;
             em {
                font-style: normal;
                font-size: 12px;
                color: #8892ac;
                margin-right: 14px;
                display: inline-block;
            }
        }
    }
    li:after {
        content: '';
        display: block;
        overflow: hidden;
        visibility: hidden;
        clear: both;
    }
    a:after {
        background-color: #fff;
    }
    .item>a:after {
        content: '';
        position: absolute;
        left: 18px;
        right: 18px;
        top: 0;
        height: 1px;
        background: #e5e9f3;
        overflow: hidden;
        -webkit-transform: scaleY(.5);
    }
}

</style>